import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar } from 'antd-mobile';
import { Steps } from 'react-vant';

const Hcg = () => {
    const navigate = useNavigate();
    const [list, setList] = useState([]);

    // 获取当前时间
    const currentTime = new Date();

    // 格式化时间
    const formatTime = (date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };

    //获取退款原因
    useEffect(() => {
        const yuan = localStorage.getItem('sqtk');
        setList(JSON.parse(yuan));
    }, []);

    const [active, setActive] = useState(3);
    const nextStep = () => setActive((prev) => (prev >= 3 ? 0 : prev + 1));

    return (
        <div style={{ background: '#f2f2f2', width: "100%", height: "100vh" }}>
            <NavBar onBack={() => navigate(-1)} className='qbfl-nav' style={{ background: '#fff' }}>换货详情</NavBar>
            <div className='tmj-box'>
                <p className='tmj-box-title'>换货成功</p>
                <p className='tmj-box-text'>{formatTime(currentTime)}</p>
            </div>
            <div className='tmj-box1' style={{marginTop:"0rem"}}>
                <Steps active={active} className='tmj-box-step'>
                    <Steps.Item>买家申请</Steps.Item>
                    <Steps.Item>商家同意</Steps.Item>
                    <Steps.Item>商家发货</Steps.Item>
                    <Steps.Item>换货成功</Steps.Item>
                </Steps>
                <p className='tmj-box-text2'>{formatTime(currentTime)}</p>
                <p className='tmj-box-text2'>买家收到退款后则退款成功</p>
                <p className='tmj-box-text3'>换货信息</p>
            </div>
            <div className='xzfw-div' style={{background:"#f8f8f8"}}>
                <img src={list.img} alt="" className='wlgz-img' />
                <div>
                    <p className='xzfw-p' style={{marginTop:"0.5rem"}}>{list.name}</p>
                    <p className='xzfw-p1'>{list.name}</p>
                </div>
            </div>
            <div className='tmj-box2' style={{height:'4.65rem'}}>
                <p className='tmj-box-text4'>换货原因：{list.refundReason}</p>
                <p className='tmj-box-text4'>申请件数：1</p>
                <p className='tmj-box-text4'>申请时间：{formatTime(currentTime)}</p>
                <p className='tmj-box-text4'>服务编号：{list._id}</p>
            </div>
        </div>
    );
};

export default Hcg;